<script setup lang="ts">
import { ref, watch } from 'vue';

interface WeatherConfig {
  city: string;
  showForecast: boolean;
}

const props = defineProps<{
  config: WeatherConfig;
}>();

const emit = defineEmits<{
  'update:config': [config: WeatherConfig];
}>();

const localConfig = ref<WeatherConfig>({ ...props.config });

watch(
  localConfig,
  (newVal) => {
    emit('update:config', newVal);
  },
  { deep: true },
);

const cityOptions = [
  '北京',
  '上海',
  '广州',
  '深圳',
  '杭州',
  '南京',
  '武汉',
  '成都',
  '西安',
  '重庆',
];
</script>

<template>
  <div class="weather-card-config">
    <el-form label-width="100px">
      <el-form-item label="城市">
        <el-select
          v-model="localConfig.city"
          filterable
          allow-create
          placeholder="请选择或输入城市"
        >
          <el-option
            v-for="city in cityOptions"
            :key="city"
            :label="city"
            :value="city"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="显示预报">
        <el-switch
          v-model="localConfig.showForecast"
          active-text="显示未来几天天气"
          inactive-text="仅显示当前天气"
        />
      </el-form-item>

      <el-form-item>
        <el-alert
          title="提示"
          description="天气数据为模拟数据，实际使用时需要接入真实的天气API服务"
          type="info"
          show-icon
          :closable="false"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
